import React, { Component } from "react";
import "./CryptographicNumberInput.scss";
import KeyboardController from "./KeyboardController";
import { InputItem } from "antd-mobile";

/** 组件的一个数字编号用于设定key的时候使用 */
let keyNum = 1;
/**
 * 自定义加密键盘输入组件
 * 属性
 * length: 默认 6
 */
export default class CryptographicNumberInput extends Component {
	constructor(props) {
		super(props);
		keyNum++;
		this.state = {
			values: [],

			isAciton: false
		};
		/** 加密输入数据 */
		this._value = "";
		/** 是否打开键盘 */
		this._isAciton = false;
		if (!props.isNormal) {
			/** 注册一个键盘控制器 */
			this.Keyboard = KeyboardController.registerKeyboard({
				//键盘输入完成/收起
				onKeyComplete: _value => {
					if (_value) {
						if (this.state.values.length > 3 && this.state.values.length < 6) {
							this.reset();
						} else {
							this._value = _value;
							this.props.onComplete && this.props.onComplete(this._value);
						}
					} else if (
						this._isAciton ||
						(this.state.values.length > 3 && this.state.values.length < 6)
					) {
						this.reset();
					}
					this._isAciton = false;
					this.setState({ isAciton: false });
				},
				//键盘输入
				onKeyInput: () => {
					let { length = 6 } = this.props;
					if (this.state.values.length < length) {
						this.addNumber();
					}
				},
				//键盘删除键
				onKeyRemove: () => {
					if (this.state.values.length) {
						this.delNumber();
					}
				},
				//激活键盘激活键盘时会清空所有数据
				onAction: () => {
					this.reset();
					this._isAciton = true;
					this.setState({ isAciton: true });
				},
				//失去焦点
				onNoAction: () => {
					this._isAciton = false;
					this.setState({ isAciton: false });
				}
			});
		}
		this.inputRef = React.createRef();
	}

	/** 组件销毁时销毁键盘控制器 */
	componentWillUnmount() {
		if (this.Keyboard) {
			this.Keyboard.destroy();
		}
	}

	/**显示键盘 */
	showKeyboard(e) {
		e.stopPropagation();
		if (!this.props.isNormal) {
			this.Keyboard.open();
		}
	}

	/**关闭键盘 */
	closeKeyboard() {
		if (!this.props.isNormal) {
			this.Keyboard.close();
		}
	}

	/** 添加一个数值 */
	addNumber() {
		let values = [...this.state.values];
		values.push("1");
		this.onChange(values);
	}

	/**删除一个数值 */
	delNumber() {
		let values = [...this.state.values];
		if (values.length) {
			values.splice(values.length - 1, 1);
		}
		this.onChange(values);
	}

	/**清除值 */
	reset() {
		this.setState({ values: [] });
		this._value = "";
		this.props.onChange && this.props.onChange(false);
		this.props.onComplete && this.props.onComplete("");
	}

	/** 加密键盘的inputchange事件 */
	onChange(values) {
		let { length = 6 } = this.props;
		this.setState({ values }, () => {
			if (this._value !== this.props.value) {
				this.props.onChange && this.props.onChange(values.length === length);
			}
		});
	}

	/** 不加密键盘的onChange事件 */
	onChangeNoCry(value) {
		if (/^\d*$/.test(value)) {
			let values = value.split("");
			let { length = 6 } = this.props;
			if (values.length > length) return;
			this.setState({ values }, () => {
				this.props.onChange && this.props.onChange(values.length === length);
				this.props.onComplete && this.props.onComplete(values.join(""));
			});
		}
	}

	render() {
		let initArr = ["", "", "", "", "", ""];
		let { length = 6, isNormal = false } = this.props;
		return (
			<div
				className={`cryptographicNumberInputWrap ${
					this.state.isAciton ? "action" : ""
				}`}
			>
				<ul
					className="cryptographicNumberInput"
					onClick={e => this.showKeyboard(e)}
				>
					{initArr.map((v, i) => {
						return (
							<li
								key={`cni-${keyNum}-${i}`}
								className={this.state.values[i] ? "hasNumber" : ""}
							></li>
						);
					})}
				</ul>
				<div
					style={{ display: this.state.isAciton ? "block" : "none" }}
					className="cni-bg"
					onClick={() => this.closeKeyboard()}
				></div>
				{isNormal && (
					<InputItem
						ref={this.inputRef}
						className="cryptographicNumberInput-normal"
						value={this.state.values.join("")}
						type="money"
						maxLength={length}
						disabledKeys={["."]}
						onChange={v => this.onChangeNoCry(v)}
					/>
				)}
			</div>
		);
	}
}
